1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<script>
import { untrack } from "svelte";
import { t } from "$lib/translations";
import { enhance } from "$app/forms";
import Amount from "$comp/Amount.svelte";
import Numpad from "$comp/Numpad.svelte";
import Spinner from "$comp/Spinner.svelte";
import { page } from "$app/stores";
import { loc, back, toFiat, f, s, focus } from "$lib/utils";
import { rate, pin } from "$lib/store";
let { data, form } = $props();
let { alias, payreq, ourfee, user } = $derived({ ...data, ...form });
let a = $state();
let { currency } = $derived(user);
let locale = loc(user);
$effect(() => ($rate ||= data.rate));
$effect(() => form && (loading = false));
let showMax = $state();
let loading = $state();
let submit = () => (loading = true);
let next = $state();
let toggle = () => (show = !show);
let amount = $derived(form?.amount || data.amount);
let maxfee = $state(Math.max(5, Math.round(untrack(() => amount) * 0.005)));
</script>
<div class="container px-4 max-w-xl mx-auto text-center space-y-2">
{#if form?.message}
<div class="text-red-600 text-center">
{$t(form.message)}
</div>
{/if}
{#if amount}
<div>
<h1 class="text-lg text-secondary">
{$t("payments.send")}
</h1>
<Amount {amount} rate={$rate} {currency} {locale} />
</div>
<div class="text-xl">
<span class="text-secondary">{$t("payments.to")}</span>
<span class="break-words font-semibold">{alias}</span>
</div>
{#if ourfee}
<div class="text-center">
<h2 class="text-secondary text-lg">{$t("payments.platformFee")}</h2>
<div class="flex flex-wrap gap-4 justify-center">
<div class="my-auto">
<h2 class="text-xl">
{f(toFiat(ourfee, $rate), currency)}
</h2>
<h3 class="text-secondary">⚡️{s(ourfee)}</h3>
</div>
</div>
</div>
{/if}
<form
method="POST"
use:enhance
onsubmit={submit}
action="?/send"
class="space-y-2"
>
<input name="payreq" value={payreq} type="hidden" />
<input name="amount" value={amount} type="hidden" />
<input name="pin" value={$pin} type="hidden" />
{#if form?.message || showMax}
<div class="mx-auto space-y-2">
<label for="maxfee" class="text-lg text-secondary"
>{$t("payments.maxfee")}</label
>
<div class="text-secondary">
{$t("payments.maxFeeDesc")}
</div>
<label
class="input input-bordered border-primary input-lg rounded-2xl flex items-center gap-2 text-left"
>
<input
id="maxfee"
name="maxfee"
bind:value={maxfee}
class="clean !grow"
/>
<div class="ml-auto">⚡️</div>
</label>
</div>
{/if}
<button
type="submit"
class="btn btn-primary"
disabled={loading}
use:focus
>
{#if loading}
<Spinner />
{:else}
{$t("payments.send")}
{/if}
</button>
{#if !(form?.message || showMax)}
<button type="button" class="btn" onclick={() => (showMax = !showMax)}
>Advanced settings</button
>
<input name="maxfee" type="hidden" bind:value={maxfee} />
{/if}
</form>
{:else}
<form method="POST" action="?/setAmount" class="space-y-2" use:enhance>
<input type="hidden" value={a} name="amount" />
<input name="rate" value={$rate} type="hidden" />
<Numpad
bind:amount={a}
{currency}
{locale}
bind:rate={$rate}
submit={next}
/>
<button type="submit" class="btn" bind:this={next}
>{$t("payments.next")}</button
>
</form>
{/if}
</div>
|
